<template>
  <div class="card">
    <!-- 用户信息 -->
    <div class="use">
      <img :src="userStore.avatar" alt="" />
      <span>{{ userStore.username }} {{ strVal }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
/* 获取登录用户信息 */
import { userInfoStore } from '@/store/userLogin/user'
import { onMounted, ref } from 'vue'
/* 导入时间 */
import { getData } from '@/directives/utils/data'
/* 获取用户信息 */
const userStore = userInfoStore()
const strVal = ref()
const getStr = () => {
  strVal.value = getData().str.value.replace('', '') + '!'
}
onMounted(() => {
  userStore.getUser()
  getStr()
})
</script>

<style scoped lang="scss">
.card {
  display: flex;
  align-items: center;
  width: 100%;
  height: 230px;
  border-radius: 30px;
  background-image: linear-gradient(-225deg, #fffeff 0%, #d7fffe 100%);
  .use {
    display: flex;
    align-items: center;
    margin-left: 20px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-right: 20px;
    }
    span {
      font: 30px 'Fira Sans', sans-serif;
      background-image: linear-gradient(
        -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}
</style>
